<template>
	<!-- 全部鉴定 -->
	<view class="page">
		<view class="tabs">
			<view class="tab_item" :class="{tab_item_a:tabIndex==1}" @click="clickTab(1)">
				待鉴定
				<view class="tab_line" v-show="tabIndex==1"></view>
			</view>
			<view class="line"></view>
			<view class="tab_item" :class="{tab_item_a:tabIndex==2}" @click="clickTab(2)">
				已鉴定
				<view class="tab_line" v-show="tabIndex==2"></view>
			</view>
		</view>

		<view class="list">
			<c-scroll-list ref="list" :api="api" :apiParams="{identified:this.tabIndex-1}" @load="load">
				<view class="list_item" v-for="(item,index) in orderList" :key="index"
					@click="$fn.jumpPage(`/pages/appraiser/pages/staffIdentDetails?param=${item.number}`)">
					<view class="list_item_l">
						<image class="img" :src="vuex_imgUrl+item.itemImage" mode=""></image>
						<view class="info">
							<view class="title">鉴定编号：{{item.number}}</view>
							<view class="date">{{$fn.parseTime(item.createTime)}}</view>
							<view class="auth a1" v-if="item.identified==0">未鉴定</view>
							<view class="auth a2" v-else-if="item.identified==1">已鉴定</view>
						</view>
					</view>
					<view class="list_item_r">
						<view class="text" v-if="item.authenticationResult==3">待补图</view>
						<view class="text" v-if="item.authenticationResult==2">无法判断</view>
						<image class="asTrue" v-if="item.authenticationResult==0" src="/static/tabbar/asTrue.png"
							mode=""></image>
						<image class="asTrue" v-if="item.authenticationResult==1" src="/static/tabbar/asFalse.png"
							mode=""></image>
					</view>
				</view>
			</c-scroll-list>
		</view>

	</view>
</template>

<script>
	export default {
		name: "allIdent",
		data() {
			return {
				tabIndex: 1,
				api: this.$api.getAppraiserorderList,
				apiParams: {},
				orderList: [],
			};
		},
		onLoad() {
			// this.getAppraiserorderList();
		},
		onShow() {},
		methods: {
			// 切换tab
			clickTab(index) {
				this.tabIndex = index
				// this.getAppraiserorderList();
				setTimeout(()=>this.$refs.list.refresh(),100)
			},
			// 获取数据列表
			load(res) {
				console.log(res.list, '列表数据');
				this.orderList = res.list.map(order => {
				
					// if(typeof order.itemImage)
					order.itemImage = order.itemImage
					console.log(order)
					return order
				})


			},
			getAppraiserorderList() {
				this.$api.getAppraiserorderList({
					identified: this.tabIndex - 1
				}).then(res => {
					console.log(res.data, "鉴定师订单")
					this.orderList = res.data.list.map(order => {

						order.itemImage = JSON.parse(order.itemImage)[0]

						return order
					})

					console.log(this.orderList, "处理后的鉴定师订单")
				})
			},
		}
	};
</script>

<style lang="scss" scoped>
	.tabs {
		display: flex;
		border-bottom: 1rpx solid #E6E6E6;
		padding-top: 30rpx;

		.tab_item {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 10rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;


			.tab_line {
				width: 64rpx;
				height: 6rpx;
				background: #1A1A1A;
				border-radius: 4rpx;
			}
		}

		.tab_item_a {
			font-weight: bold;
			font-size: 32rpx;
			color: #1A1A1A;
		}

		.line {
			width: 1rpx;
			height: 24rpx;
			background: #CCCCCC;
			margin-top: 10rpx;
		}
	}

	.list {
		padding: 0 32rpx;
		box-sizing: border-box;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		background-color: #FFFFFF;
		position: relative;

		.list_item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 28rpx 0;
			border-bottom: 1rpx solid #E6E6E6;

			.list_item_l {
				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: 28rpx;

				.img {
					width: 128rpx;
					height: 128rpx;
					border-radius: 8rpx;
				}

				.info {
					display: flex;
					flex-direction: column;
					height: 128rpx;
					justify-content: space-between;

					.title {
						font-weight: bold;
						font-size: 28rpx;
						color: #1A1A1A;
					}

					.date {
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
					}

					.auth {
						font-size: 24rpx;
					}

					.a1 {
						color: #FF9500;
					}

					.a2 {
						color: #01AF21;
					}

				}

			}

			.list_item_r {

				.text {
					font-size: 28rpx;
					color: #F53100;
				}

				.asTrue {
					width: 80rpx;
					height: 80rpx;
				}

			}
		}
	}
</style>